<template>
	<view class="w-100 bac-col-fa bottom-index" :class="ListStyle == 0?'':'animate__fadeIn dh-0-6s'"
		style="min-height: 100vh;">
		<!-- 加载中蒙版 -->
		<uni-transition mode-class="fade" :duration="500" :show="!dataLoaded" custom-class="vague-bg-9 mask-load">
		</uni-transition>
		<view
			:style="{position:'sticky',height:menuObject.height + menuObject.top +8 + 'px',width:'100%',zIndex:'2',top:0}"
			class="w-100 vague-bgfa-8">
			<view class="flex-dir-row "
				:style="{top:menuObject.top + 'px',height:menuObject.height + 'px',lineHeight:menuObject.height+'px',position:'sticky'}">
				<view v-if="!searchState" @click="stateClick('open')" class="iconfont ic-sousuo1 fs-46 ml-30 dh-1s"
					:class="searchState?'animate__fadeOut ':'animate__fadeIn'"></view>
				<view v-if="searchState" class="search col-0a2e36 bac-col-0a20a flex-dir-row ali-item-cen w-100"
					:style="{ width: searchWidth + 'rpx',transition: 'width 0.5s ease-in-out,padding 0.3s ease-in-out',padding:searcPadding+'rpx'}">
					<text class="iconfont ic-sousuo fs-40 mr-10 col-00ba31"></text>
					<input class="fs-24 w-100 col-0a2e36" type="text" confirm-type="search" v-model="searchText"
						placeholder-style="color:#0a2e365e" placeholder="点击搜索活动" @confirm="fuzzySearch" />
					<text class="iconfont ic-qingchu fs-40" @click="stateClick('close')"></text>
				</view>
				<view v-if="!searchState" class="flex-dir-row fs-32 pos-abso flex-x-bet fw-600 dh-1s centered"
					:class="searchState?'animate__fadeOut ':'animate__fadeIn'">
					<view>奇妙圈子</view>
				</view>
			</view>
		</view>
		<!-- 悬浮球 -->
		<!-- <drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" /> -->
		<view :class="ListStyle == 0?'ping-20':'ping-30'">
			<image
				:src="bannerList.length?bannerList[0].bannerfile : 'https://gd-hbimg.huaban.com/3269e7db02608605bd72f3ad4d30e409e86a78f9398bd-AdWML0'"
				class="w-100 br-200 border-f0 image-130" mode="aspectFill"></image>
			<view v-if="activityData.length" class="w-100 mt-30">
				<view class="flex-dir-row ali-item-cen flex-x-bet">
					<view class="fw-600">
						精选活动
					</view>
					<view @click="$NavigateTo(`../list/selected-activity`)"
						class="col-87 ali-item-cen fs-24 flex-dir-row">
						<view>查看更多</view>
						<view class="iconfont ic-you fs-28"></view>
					</view>
				</view>
				<view class="w-100 flex-dir-row mt-30">
					<view @click="$NavigateTo(`../detail/detail?id=${item._id}`)"
						:style="{marginLeft:index == 0?'0':ListStyle == 1?'83.33rpx':'91rpx'}"
						v-for="(item,index) in activityData" :key="index" class="flex-dir-col ali-item-cen">
						<image class="br-10 image-110" :src="item.imgs[0].src" mode="aspectFill"></image>
						<view class="fs-26 fw-600 text-element-1 text-ali-c mt-10" style="width: 110rpx;">{{item.name}}
						</view>
						<view class="fs-24 col-b1">{{item.user_info.length + '人报名'}}</view>
					</view>
				</view>
			</view>
			<view class="mt-30 ">
				<view class="flex-dir-row flex-x-bet ali-item-cen">
					<v-tabs :pills="true" :zIndex="1" bgColor="#ffffff00" pillsColor="#ffffff00" fontSize="28rpx"
						activeFontSize="30rpx" lineHeight="40rpx"
						activeColor="linear-gradient(to right, #000000, #000000)"
						color="linear-gradient(to right, #000000, #000000)" bold lineColor="#14cc60" v-model="current"
						paddingItem="0 20rpx 0 0" :tabs="tabs" @change="changeTab"></v-tabs>
					<!-- 展示形式 -->
					<view v-if="ListStyle == 0" @click="listStyleChange(1)" class="fs-44 iconfont ic-liebiaoxingshi">
					</view>
					<view v-if="ListStyle == 1" @click="listStyleChange(0)" class="fs-44 iconfont ic-pubuliuhengxiang">
					</view>
				</view>
				<!-- 如果圈子列表为空 -->
				<view v-if="circleList.length == 0" class="pos-rela" style="height: 30vh;">
					<view class="activity-empty-box">
						<image class="activity-empty-image"
							src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/circle-empty.png"
							mode="scaleToFill" />
						<view class="fs-28 fw-600">暂无圈子</view>
					</view>
				</view>
				<view v-else>
					<!-- 列表排列 -->
					<view v-if="ListStyle == 1" class="animate__fadeIn dh-0-6s">
						<view v-for="(item,index) in circleList" :key="index"
							:class="index == circleList.length - 1?'mb-20':'mb-30'"
							class="bac-col-f br-20 ping-30 mt-10 pos-rela" style="z-index: 1;">
							<view class="flex-dir-row ali-item-cen"
								@click="$NavigateTo(`/pages/user/myPage?usid=${item.user_id}`)">
								<qmy-gender-border :gender="item.user_gender"
									:avatar="item.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
									:avatarWidth="75 + 'rpx'" :avatarHeight="75 + 'rpx'"></qmy-gender-border>
								<view class="ml-20">
									<view class="fs-26 fw-600 flex-dir-row ali-item-cen">
										<view class="text-element-1">{{item.user_name || '匿名用户'}}</view>
										<view v-if="item.is_essence" class="fs-20 highlighted">精选</view>
									</view>
									<view class="fs-24 col-b1 mt-5">
										{{$timeFormat(item.last_modify_date || item.publish_date)}}
									</view>
								</view>
							</view>
							<view class="mt-20" @click="$NavigateTo(`/pages/detail/articleDetail?id=${item._id}`)">
								<view class="fs-28 text-element-4">
									{{item.title}}
								</view>
								<image v-if="item.thumbnail.length == 1" class="br-20 mt-20 image-280"
									:src="item.thumbnail[0]" mode="aspectFill">
								</image>
								<view v-else-if="item.thumbnail.length == 2" class="flex-dir-row flex-x-bet">
									<image v-for="(url,its) in item.thumbnail"
										:class="its == 0?'brtl-20 brbl-20':'brtr-20 brbr-20'" :key="its"
										class="mt-20 image-3125" :src="url" mode="aspectFill">
									</image>
								</view>
								<view v-else-if="item.thumbnail.length >= 3" class="flex-dir-row flex-x-bet">
									<image v-for="(url,its) in item.thumbnail.slice(0,3)"
										:class="its == 0?'brtl-20 brbl-20':its == 1?'':'brtr-20 brbr-20'" :key="its"
										class="mt-20 image-205" :src="url" mode="aspectFill">
									</image>
								</view>
							</view>
							<view>
								<view class="flex-x-bet ali-item-cen flex-dir-row mt-20">
									<view>
										<view v-if="item.activity_id"
											@click="$NavigateTo(`../detail/detail?id=${item.activity_id}`)"
											class="br-200 flex-dir-row ali-item-cen border-bf padding-5-15">
											<image class="image-28" :src="item.activity_img[0].src" mode="aspectFill">
											</image>
											<view class="fs-26 ml-10 text-element-1">{{item.activity_name}}</view>
										</view>
									</view>
									<view class="flex-dir-row ali-item-cen col-87">
										<view class="flex-dir-row ali-item-cen">
											<view class="iconfont ic-talk-line fs-46"></view>
											<view class="fs-28 ml-5">{{item.comment_count || 0}}</view>
										</view>
										<view @click="likeCircle(item._id)" class="flex-dir-row ali-item-cen ml-20">
											<view class="iconfont fs-46 "
												:class="item.like_user_id.includes(userInfo._id)?'ic-nice col-00ba31':'ic-nice-line col-87'">
											</view>
											<view class="fs-28 ml-5">{{item.like_user_id.length || 0}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 瀑布流排列 -->
					<view class="mt-10" v-if="ListStyle == 0">
						<view class="flex-x-bet animate__fadeIn dh-0-6s">
							<view class="waterfall-column">
								<view class="mb-20 bac-col-f br-10 overflow-h" v-for="(item, index) in circleListLeft"
									:key="index">
									<image @click="$NavigateTo(`/pages/detail/articleDetail?id=${item._id}`)"
										:src="item.thumbnail[0]" mode="widthFix"
										style="width: 100%;height: auto;display: block;">
									</image>
									<view class="ping-20">
										<view class="item-title fs-28  text-element-2"
											@click="$NavigateTo(`/pages/detail/articleDetail?id=${item._id}`)">
											{{item.title}}
										</view>
										<view class="flex-x-bet ali-item-cen mt-10 fs-24">
											<view @click="$NavigateTo(`/pages/user/myPage?usid=${item.user_id}`)"
												class="flex-1 ali-item-cen">
												<qmy-gender-border iconWidth="15rpx" iconHeight="15rpx" iconSize="12rpx" iconLineHeight="15rpx" :gender="item.user_gender" :avatar="item.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'" :avatarWidth="40 + 'rpx'" :avatarHeight="40 + 'rpx'"></qmy-gender-border>
												<text
													class="nickname col-87 text-element-1 ml-10">{{item.user_name || '匿名用户'}}</text>
											</view>
											<view @click="likeCircle(item._id)" class="col-b1 ali-item-cen">
												<view class="iconfont fs-40"
													:class="item.like_user_id.includes(userInfo._id)?'ic-nice col-00ba31':'ic-nice-line'">
												</view>
												<view class="fs-24 ml-5">{{item.like_user_id.length || 0}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="waterfall-column">
								<view class="mb-20 bac-col-f br-10 overflow-h" v-for="(item, index) in circleListRight"
									:key="index">
									<image @click="$NavigateTo(`/pages/detail/articleDetail?id=${item._id}`)"
										:src="item.thumbnail[0]" mode="widthFix"
										style="width: 100%;height: auto;display: block;">
									</image>
									<view class="ping-20">
										<view class="item-title fs-28  text-element-2"
											@click="$NavigateTo(`/pages/detail/articleDetail?id=${item._id}`)">
											{{item.title}}
										</view>
										<view class="flex-x-bet ali-item-cen mt-10 fs-24">
											<view @click="$NavigateTo(`/pages/user/myPage?usid=${item.user_id}`)"
												class="flex-1 ali-item-cen">
												<qmy-gender-border iconWidth="15rpx" iconHeight="15rpx" iconSize="12rpx" iconLineHeight="15rpx" :gender="item.user_gender" :avatar="item.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'" :avatarWidth="40 + 'rpx'" :avatarHeight="40 + 'rpx'"></qmy-gender-border>
												<text
													class="nickname col-87 text-element-1 ml-10">{{item.user_name || '匿名用户'}}</text>
											</view>
											<view @click="likeCircle(item._id)" class="col-b1 ali-item-cen">
												<view class="iconfont fs-40"
													:class="item.like_user_id.includes(userInfo._id)?'ic-nice col-00ba31':'ic-nice-line'">
												</view>
												<view class="fs-24 ml-5">{{item.like_user_id.length || 0}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 底部logo -->
					<view class="mt-20 w-100 flex-center mb-20 text-ali-c flex-dir-row ali-item-cen">
						<image src="../../../static/logo.png" class="bot-logo"></image>
						<image src="../../../static/name.png" class="bot-name" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		name: 'pageB',
		props: {
			scrollTop: {
				type: Number,
				required: 0
			},
			page: {
				type: Number,
				required: 0
			},
			pageSize: {
				type: Number,
				required: 10
			},
			isVisible: {
				type: Boolean,
				required: false
			},
			refresh: {
				type: Boolean,
				required: false
			}
		},
		computed: {
			userInfo() {
				return store.userInfo //用户信息
			},
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: {
					top: 19,
					height: 36,
					width: 77
				},
				// #endif
				searchState: false,
				searchWidth: 0, //搜索框宽度
				searcPadding: 0,
				current: 0,
				ListStyle: 1,
				tabs: ['最新', '精选', '推荐', '热门'],
				bannerList: [], //轮播图
				activityData: [], //精选活动
				circleList: [], //圈子列表
				circleListLeft: [], //圈子列表左列
				circleListRight: [], //圈子列表右列
				pageStop: false, //分页是否停止
				searchText: '', //搜索框内容
				dataLoaded: false, //数据是否加载完成
			}
		},
		watch: {
			page(e) {
				if (e != 0) {
					this.getCircleList();
				}
			},
			scrollTop(e) {
				if (this.searchState && !this.searchText) {
					this.searchWidth = 0;
					this.searcPadding = 0;
					setTimeout(() => {
						this.searchState = false;
					}, 500)
				}
			},
			isVisible(val) {
				if (val && !this.dataLoaded) {
					// 获取ListStyle缓存
					if (uni.getStorageSync('ListStyle') != null) {
						this.$set(this, 'ListStyle', uni.getStorageSync('ListStyle'));
					}
					//获取轮播图数据
					this.getBannerData();
					// 获取活动数据
					this.getActivityData();
					//获取圈子列表
					this.getCircleList();
				}
			},
			refresh(e) {
				if (e) {
					this.dataLoaded = false;
					this.searchText = ''; //清空搜索框内容
					this.pageStop = false; //分页停止
					this.$emit('resetPage', 0) //重置分页页码
					this.$nextTick(() => {
						this.getCircleList();
					})
					this.searchWidth = 0;
					this.searcPadding = 0;
					setTimeout(() => {
						this.searchState = false;
					}, 500)
					this.$nextTick(() => {
						//获取轮播图数据
						this.getBannerData();
						// 获取活动数据
						this.getActivityData();
						//获取圈子列表
						this.getCircleList();
					})
				}
			}
		},
		mounted() {

		},
		methods: {
			// 切换列表样式
			listStyleChange(e) {
				this.ListStyle = e;
				uni.setStorageSync('ListStyle', e);
			},
			//获取轮播图数据
			getBannerData() {
				this.$Route('get-public-data').getBanner("圈子").then((res) => {
					this.bannerList = res.data;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			//获取活动数据
			getActivityData() {
				this.$Route('get-public-data').getActivityData({
					is_recommend: true
				}).then((res) => {
					this.activityData = res.data;
					this.dataLoaded = true;
					this.$emit('refreshState', false) //重置刷新状态
				}).catch((err) => {
					this.dataLoaded = true;
					this.$emit('refreshState', false) //重置刷新状态
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			//获取圈子列表
			getCircleList() {
				//如果分页停止，则停止请求
				if (this.pageStop) {
					this.$Toast('没有更多数据了');
					return;
				}
				this.$Route('get-public-data', true).getCircleList(this.searchText, this.current, this.page, this.pageSize)
					.then((res) => {
						// 如果是第一页直接赋值
						if (this.page == 0) {
							this.circleList = res.data;
							this.circleListLeft = this.circleList.slice(0, Math.ceil(this.circleList.length / 2));
							this.circleListRight = this.circleList.slice(Math.ceil(this.circleList.length / 2));
						} else {
							this.circleList = [...this.circleList, ...res.data];
							this.circleListLeft = this.circleList.slice(0, Math.ceil(this.circleList.length / 2));
							this.circleListRight = this.circleList.slice(Math.ceil(this.circleList.length / 2));
						}
						// 分页累加,如果返回数据条数小于pageSize，则停止分页
						if (res.data.length < this.pageSize) {
							this.pageStop = true;
						}
					}).catch((err) => {
						console.error('遇到错误:', err); // 打印错误信息
						let {
							code,
							msg
						} = this.$parseError(err); // 调用公共解析方法
						this.$Toast(msg);
					});
			},
			//点赞、取消点赞
			likeCircle(id) {
				// 点赞节流
				this.$debounce(() => {
					// 震动
					uni.vibrateShort();
					// 点赞或取消点赞时先更新点赞状态点赞数，等待返回在确认是否复原
					this.circleList.forEach(item => {
						if (item._id == id) {
							item.like_user_id.includes(this.userInfo._id) ? item.like_user_id.splice(item
								.like_user_id
								.indexOf(this.userInfo._id), 1) : item.like_user_id.push(this.userInfo
								._id);
						}
					})
					this.$Route('add-private-data', true).likeCircle(id).then((res) => {
						// 不用刷新数据无影响且禁止刷新数据,会影响分页！
						// this.getCircleList();
					}).catch((err) => {
						this.circleList.forEach(item => {
							if (item._id == id) {
								item.like_user_id.includes(this.userInfo._id) ? item.like_user_id
									.splice(item
										.like_user_id.indexOf(this.userInfo._id), 1) : item
									.like_user_id.push(
										this.userInfo._id);
							}
						})
						console.error('遇到错误:', err); // 打印错误信息
						let {
							code,
							msg
						} = this.$parseError(err); // 调用公共解析方法
						this.$Toast(msg);
						setTimeout(() => {
							if (code === 401) {
								this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
							}
						}, 1000);
					});
				}, 500, true, "likeCircle")
			},
			//切换tab，排序
			changeTab(e) {
				this.current = e;
				this.circleList = []; //清空圈子列表
				this.pageStop = false; //分页停止
				this.$emit('resetPage', 0) //重置分页页码
				this.$nextTick(() => {
					this.getCircleList();
				})
			},
			//模糊搜索
			fuzzySearch(event) {
				this.circleList = []; //清空圈子列表
				this.pageStop = false; //分页停止
				this.$emit('resetPage', 0) //重置分页页码
				this.$nextTick(() => {
					this.getCircleList();
				})
			},
			// clearInput(event) {
			// 	this.circleList = []; //清空圈子列表
			// 	this.pageStop = false; //分页停止
			// 	this.$emit('resetPage', 0) //重置分页页码
			// 	this.$nextTick(() => {
			// 		this.getCircleList();
			// 	})
			// },
			//搜索框状态
			stateClick(e) {
				if (e == 'open') {
					this.searchState = true;
					setTimeout(() => {
						// #ifdef MP-WEIXIN
						this.searchWidth = 710 - (this.menuObject.width * 2);
						// #endif
						// #ifndef MP-WEIXIN
						this.searchWidth = 750;
						// #endif
						this.searcPadding = 20;
					}, 10)
				} else {
					this.searchText = ''; //清空搜索框内容
					this.searchWidth = 0; //搜索框宽度
					this.searcPadding = 0; //搜索框padding
					setTimeout(() => {
						this.searchState = false; //搜索框状态
					}, 500)
				}
			}
		}
	}
</script>

<style lang="scss">
	.search {
		border-radius: 30px;
		margin: 0 20rpx;
		z-index: 999;
		overflow: hidden;
	}

	.centered {
		left: 50%;
		transform: translate(-50%, 0%);
	}

	.image-130 {
		height: 130rpx;
	}

	.image-110 {
		width: 110rpx;
		height: 110rpx;
	}

	.image-75 {
		width: 75rpx;
		height: 75rpx;
	}

	.image-280 {
		height: 280rpx;
		max-width: 100%;
	}

	.image-205 {
		height: 205rpx;
		width: 205rpx;
	}

	.image-28 {
		width: 28rpx;
		height: 28rpx;
		border-radius: 5rpx;
	}

	.image-3125 {
		height: 260rpx;
		width: 312rpx;
	}

	.highlighted {
		background: #ffe75c;
		width: 65rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 10rpx;
		color: #fff;
		text-align: center;
		margin-left: 10rpx;
	}

	.padding-5-15 {
		padding: 5rpx 15rpx;
	}

	// 瀑布流样式
	.waterfall-column {
		width: 48.6%;
	}

	.item-title {
		line-height: 1.4;
	}

	.avatar {
		width: 40rpx !important;
		height: 40rpx !important;
	}

	.nickname {
		max-width: 120rpx;
	}
</style>